<template>
    <div>
        <div class="wrapper" ref="wrapper">
            <a :href="$data.newImageSrc" class="__swiperbox__">
                <img :src="$data.newImageSrc" alt="" class="image1 " ref="bgImage"/>
            </a>

        </div>
    </div>
</template>
<script>
    import {mergerImage} from "./utils";

    export default {
        data() {
            return {
                newImageSrc: ""
            }

        },
        props: {
            fabric: {
                type: String,
                default: "",
            },
            src: {
                type: String,
                default: "",
            },
        },
        async created() {
            var newImageSrc = await  mergerImage(this.src, this.fabric)
            this.$data.newImageSrc = newImageSrc

        },
        async mounted() {
            new window.$.fn.SmartPhoto(".__swiperbox__");
        }
    }
</script>
<style lang="less" scoped>
    .wrapper {
        min-width: 100px;
        min-height: 100px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        /*布料*/
        .image1 {
            max-width: 99%;
            max-height: 99%;
        }
        .wrapper_fabricImage {
            position: relative;
            .image2 {
                position: absolute;
                top: 0;
                left: 0;
                max-width: 100%;
                max-height: 100%;
            }
        }

    }
</style>